<template>
  <div class="home">
    <home-header />
    <xh-layout :option="layoutOption">
      <template #one>
        <xh-card :title="'基本信息'">
          <base-info />
        </xh-card>
      </template>
      <template #two>
        <xh-card :title="'项目进展情况'">
          <xh-chart-bar />
        </xh-card>
      </template>
      <template #three>
        <xh-card :title="'月度趋势变化'">
          <xh-chart-line />
        </xh-card>
      </template>
      <template #four>
        <xh-card>
          <xh-map></xh-map>
        </xh-card>
      </template>
      <template #five>
        <xh-card :title="'各街镇服务点概览'">
          <xh-five></xh-five>
        </xh-card>
      </template>
      <template #six>
        <xh-card :title="'各街镇服务点数据深度分析'"> <DataDepth /></xh-card>
      </template>
      <template #seven>
        <xh-card :title="'运维信息'">
          <Infomation />
        </xh-card>
      </template>
      <template #eight>
        <xh-card :title="'检查井分析'">
          <div class="check-analysis">
            <div class="check-item">
              <xh-chart-pie :isLight="true" :option="analysisoption" />
            </div>
            <div class="check-item">
              <xh-chart-pie :isLight="true" :option="analysisoption" />
            </div>
            <div class="check-item">
              <xh-chart-pie :isLight="true" :option="analysisoption" />
            </div>
          </div>
          <div class="check-analysis">
            <div class="check-item">
              <xh-chart-pie :isLight="true" :option="analysisoption" />
            </div>
            <div class="check-item">
              <xh-chart-pie :isLight="true" :option="analysisoption" />
            </div>
            <div class="check-item">
              <xh-chart-pie :isLight="true" :option="analysisoption" />
            </div>
          </div>
        </xh-card>
      </template>
      <template #nign>
        <xh-card :title="'管道分析'">
          <div class="store-check-analysis">
            <div class="store-check-item">
              <xh-chart-pie :isLight="true" :option="analysisoption" />
            </div>
            <div class="store-check-item">
              <xh-chart-pie :isLight="true" :option="analysisoption" />
            </div>
            <div class="store-check-item">
              <xh-chart-pie :isLight="true" :option="analysisoption" />
            </div>
          </div>
        </xh-card>
      </template>
    </xh-layout>
  </div>
</template>

<script>
import XhLayout from "../components/layout/index.vue";
import HomeHeader from "../views/title/index.vue";
import XhChartBar from "../components/echarts/bar/index.vue";
import XhCard from "../components/xh-card/index.vue";
import BaseInfo from "../views/baseInfo/index.vue";
import Infomation from "../views/infomation/index";
import DataDepth from "../views/dataDepth/index.vue";
import XhChartLine from "../components/echarts/line/index.vue";
import XhChartPie from "../components/echarts/pie/index.vue";
import XhMap from "../views/mapInfo";
import XhFive from "../views/fiveInfo"
export default {
  components: {
    XhLayout,
    HomeHeader,
    XhChartBar,
    XhCard,
    BaseInfo,
    Infomation,
    DataDepth,
    XhChartLine,
    XhChartPie,
    XhMap,
    XhFive,
  },
  data() {
    return {
      // 网格布局配置项
      layoutOption: {
        // 网格数量及整体布局
        area: [
          { gridarea: [1, 1, 2, 2], slotName: "one" },
          { gridarea: [2, 1, 3, 2], slotName: "two" },
          { gridarea: [3, 1, 4, 2], slotName: "three" },
          { gridarea: [1, 2, 3, 5], slotName: "four" },
          { gridarea: [3, 2, 4, 4], slotName: "five" },
          { gridarea: [3, 4, 4, 5], slotName: "six" },
          { gridarea: [1, 5, 2, 6], slotName: "seven" },
          { gridarea: [2, 5, 3, 6], slotName: "eight" },
          { gridarea: [3, 5, 4, 6], slotName: "nign" },
        ],
      },
      pieoption: {
        tooltip: {
          trigger: "item",
        },
        // legend: {
        //   top: "5%",
        //   left: "center",
        // },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            emphasis: {
              label: {
                show: true,
                // fontSize: "40",
                fontFamily: "SimHei",
                fontWeight: "normal",
              },
            },
            data: [
              { value: 1042, name: "松陵街道" },
              { value: 90, name: "黎里镇" },
              { value: 160, name: "七都镇" },
              { value: 30, name: "江陵街道" },
              { value: 220, name: "同里镇" },
              { value: 0, name: "桃源镇" },
              { value: 0, name: "八坼街道" },
              { value: 120, name: "平望镇" },
              { value: 0, name: "震泽镇" },
              { value: 0, name: "横扇街道" },
              { value: 78, name: "盛泽镇" },
            ],
          },
        ],
      },
      analysisoption: {
        title: [
          {
            subtext: "标题",
            left: "45%",
            top: "82%",
            textAlign: "center",
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["80%", "95%"],
            // avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.home {
  border: 1px solid #000;
  width: 1920px;
  height: 1080px;
  background: #032540 url("../assets/bg.png") 100%;
}
.table-detail td,
.table-detail th {
  padding: 1px;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
.check-analysis {
  display: flex;
  height: calc(50% - 15px);
}
.check-item {
  flex: auto;
  width: 33.3%;
  height: 158px;
}
.store-check-analysis {
  display: flex;
  height: 236px;
}
.store-check-item {
  flex: auto;
  width: 33.3%;
  height: 100%;
}
</style>
